<script src="/js/echarts/dist/echarts.js"></script>
<script type="text/JavaScript" src="/My97DatePicker/WdatePicker.js"></script>
<style>
	label,input{
		display:inline-block;
	}
	input{
		margin-right:5%;
	}
	/* ============================================================
	弹出框
	============================================================ */
	.popup-wrapper {
		display:none;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}

	.popup-wrapper .popup-bg {
		background-color: rgba(0,0,0,0.53);
		width: 100%;
		height: 100%;
	}

	.popup-layout {
		background-color: #fff;
		border-radius: 5px;
		-moz-border-radius: 5px;
		position: fixed;
		padding-top: 10px;
		padding-bottom: 10px;
		top: 20%;
		left: 25%;
		max-height:50%;
		text-align: center;
	}

	.popup-layout .btn-close {
		background: url('/img/icon_close.png') no-repeat left center;
		background-size: 24px 25px;
		cursor: pointer;
		display: block;
		width: 24px;
		height: 25px;
		position: absolute;
		right: -6px;
		top: -5px;
	}

	.user-list {
	    list-style: none;
	    margin: 0;
	    max-height: 320px;
	    overflow-y: auto;
	    overflow-x: hidden;
	}
	.user-list li{
		min-width:100px;
		height:25px;
		line-height:25px;
		padding:0 20px;
	}
	.user-list li:nth-child(2n){
		background-color:#e2e2e2;
	}
</style>
<div class="row-fluid form-wrapper">
	<div class="span9 with-sidebar">
		<div class="container">
			<div class="table-wrapper products-table section">
				<form action="" method="get" name="search" class="form-horizontal">
					<div class="field-box"></div>
					<div class="control-group form-group span12">
						<label for="organization_name">起始时间：</label>
						<input type="text" onclick="WdatePicker()" class="Wdate" name="start_time" value="<?php echo $start_time?>"></input>
						<label for="organization_name">结束时间：</label>
						<input type="text" onclick="WdatePicker()" class="Wdate" name="end_time" value="<?php echo $end_time?>"></input>
						<input type="submit" class="btn-glow primary" value="查询" />
					</div>
				</form>
				<div id="pad-wrapper">
					<div id="main" style="height:400px"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- side right column -->
	<div class="span3 form-sidebar pull-right">
	</div>
</div>
<div class="popup-wrapper unfollow-user">
	<div class="popup-bg" data-cpopup=".unfollow-user"></div>
	<div class="popup-layout">
		<span class="btn-close" data-cpopup=".unfollow-user"></span>
		<ul class="user-list" id="user-list">
		</ul>
	</div>
</div>

<script type="text/javascript">
	$("body").delegate('[data-spopup]', 'click', function () {//显示弹出框
		if ($($(this).data('spopup'))) {
			$($(this).data('spopup')).show();
			$($(this).data('spopup')).siblings().addClass("disableClick");
		};
	}).delegate('[data-cpopup]', 'click', function () {//隐藏弹出框
		if ($($(this).data('cpopup'))) {
			$($(this).data('cpopup')).hide();
			$($(this).data('cpopup')).siblings().removeClass("disableClick");
		};
	});
	
	<!--显示取消关注用户列表-->
	function showUsers(param){
		renderUsers(param);
		$(".popup-wrapper").show();
		resetPopupSize();
	};
	<!--设置弹出框的位置-->
	function resetPopupSize(){
		$(".popup-layout").each(function (index, element) {
			$(this).css({"left":($(window).width()-$(this).width())/2+"px","top":($(window).height()-$(this).height())/2+"px"});
		});
	}
	<!--动态加载数据-->
	function renderUsers(param){
		//使用ajax查询数据
		$.ajax({
			url: "/site/ajaxusers",
			type: "post",
			data:{date_time: param},
			dataType: "html",
			success: function(li)
			{
				$("#user-list").html(li);
			}
		});
	};
	<!--初始化图标插件-->
	require.config({
		paths: {
			echarts: '/js/echarts/dist'
		}
	});
	require([
		'echarts',
		'echarts/chart/line',
		'echarts/chart/bar'
	],
	function(ec) {
		var ecConfig = require('echarts/config');

		var myChart = ec.init(document.getElementById('main'));
		var option = {
			title: {
				text: '服务号取消关注数据变化（默认为7天数据显示）',
				subtext: '<?php echo str_replace('-', '/', $start_time)?> - <?php echo str_replace('-', '/', $end_time)?>'
			},
			toolbox: {
				show: false,
				feature: {
					mark: {
						show: true
					},
					dataView: {
						show: true,
						readOnly: false
					},
					magicType: {
						show: true,
						type: ['line', 'bar']
					},
					restore: {
						show: true
					},
					saveAsImage: {
						show: true
					}
				}
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: ['取消关注']
			},
			xAxis: [{
				type: 'category',
				data: <?php echo $dates?>
			}],
			yAxis: [{
				type: 'value'
			}],
			series: [{
				"name": "取消关注",
				"type": "line",
				"data": <?php echo $json_data?>,
				"markPoint": {
				data: []
			},
		}]
	};
	myChart.setOption(option);
	myChart.setTheme("infographic");


	myChart.on(ecConfig.EVENT.CLICK, function(param){
// 			var temp = "";
// 			for(var i in param)
// 			{
// 				temp += i+":"+eval("param."+i)+"\n";
// 			}
// 			alert(temp);
		showUsers(param.name);
	});

	window.onresize = myChart.resize;
	});
</script>